<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 1.引入 elemntui样式 我这里引用的是远程的，需要联网-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
<!-- 用id=app 指明vue作用域-->
<div id="app">
    <div>
        <el-divider></el-divider>
        <el-checkbox label="4.输入账号密码,点击登录,如果账号密码正确,跳转页面到百度。如果不匹配,提示密码错误,只有一个账号(name=admin,psw=admin)"></el-checkbox>
        <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="name">
                <el-input style="width:300px" v-model='user.name'></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="name">
                <el-input style="width:300px" v-model='user.psw'></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
        <el-divider></el-divider>
    </div>

</div>
<!-- 2.引入 vue.js -->
<script src="js/vue.js"></script>
<!-- 3.引入 axios 异步请求工具 -->
<script src="js/axios.js"></script>
<!-- 4.引入 elemntui相关的js,处理响应特效的 我这里引用的是远程的，需要联网 -->
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>

<script>
    //固定语法，new Vue({}) 在大括号里面写代码
    new Vue({
        //5.指明vue作用域  <div id="app"></div>
        el: '#app',
        //6.数据区
        data() {
            return {
                tempNumber: '',
                imgFlag: false,
                user: {
                    name: '',
                    psw: ''
                },
                currentPage: 1,
                tableData: ''



            }
        },
        //8.所有的方法都会在这里
        methods: {
            login() {
                if (this.user.name === 'admin' && this.user.psw === 'admin') {
                    window.location.href = 'https://www.baidu.com/';
                } else {
                    this.$message({
                        type: 'info',
                        message: '密码错误'
                    });
                }


            },
        }
    })
</script>
</body>
</html>